$base-color: #58595B;
$active-color: white;
$base-gradient: 'gradient';
$tabs-dark: #343433;
$tabs-light: #000;
$tabs-bar-gradient: 'gradient';
$list-header-bg-color: #343433;
@import 'sencha-touch/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
//@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-loading-spinner;
//@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include pictos-iconmask('code3');
@include pictos-iconmask('arrow_up');
@include pictos-iconmask('arrow_down');
@include pictos-iconmask('arrow_left');
@include pictos-iconmask('arrow_right');
@include pictos-iconmask('bookmark2');
@include pictos-iconmask('info2');
@include pictos-iconmask('settings9');
@include pictos-iconmask('delete_black2');
@include pictos-iconmask('delete_black2');
@include pictos-iconmask('phone1');
@include pictos-iconmask('mail');
@include pictos-iconmask('doc_drawer');
@include pictos-iconmask('docs_black2');
@include pictos-iconmask('user');
@include pictos-iconmask('blogIcon');
@include pictos-iconmask('facebookIcon');
@include pictos-iconmask('link1');

body {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    line-height:1.5;
    word-wrap: break-word;
    -webkit-text-size-adjust: none;
    background-color: grey;
}

h1{
    font-weight:bold;
    font-size: 0.7em;
}

h2{
    font-weight:bold;
    font-size: 0.65em;
}

h3{
    font-weight:bold;
    font-size: 0.65em;
    font-style:italic;
}

h4{
    font-size: 0.6em;
}

.x-list-header
{
   color: white !important;
   border-left: 0.8em solid #f0a03e; 
}

.x-list-normal .x-list-header {
	font-size: 0.7em;        
}

.x-list .x-list-item .x-list-item-label {
	padding: 0px;
}

.x-list-normal .x-list-item .x-list-item-label {
	border-top: 0px solid #dedede;
}

.x-list-normal .x-list-header {
	border-top: 0px solid #58595b;
	border-bottom: 0px solid #262627;
}

.x-tabbar.x-docked-top .x-button-label, .x-tabbar.x-docked-top .x-hasbadge .x-badge, .x-hasbadge .x-tabbar.x-docked-top .x-badge {
	font-size: .5em;
}

.x-title {
	font-size: 0.7em;
}

.x-tabbar.x-docked-top .x-tab {
	padding: 0.4em 0.5em;
}

.x-toolbar .x-button .x-button-label, .x-toolbar .x-hasbadge .x-badge, .x-hasbadge .x-toolbar .x-button .x-badge {
	font-size: .5em;
}
 .x-button {
	background-color: #FFFFFF;
}

.x-toolbar-light {
	background-color: #58595B;
}

.x-list-paging{
    background-color: #343433;
    border: 1px dashed #F7B35B;
    font-size: 0.7em;
    font-weight: bold;
    color: white;
    padding: 0.5em;
    text-align: center;
}

.tp-logo-splash{
    background-image: url(../../resources/images/tp_logo.gif);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.closeIcon {
    background-color: white;
    border: 0;
    border-top: 5px solid orange;
}

.mainBackgroundColor{
    background-color: #343433;
}

.backgroundRightArrowPanel{
    background-image: url(../../resources/images/backgroundArrowRight800x1280.jpg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background-size: 100%;
}

.backgroundLeftArrowPanel{
    background-image: url(../../resources/images/backgroundArrowLeft800x1280.jpg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background-size: 100%;
}

.backgroundLeftPanel{
    background-image: url(../../resources/images/backgroundLeft800x1280.jpg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background-size: 100%;
}

.backgroundRightPanel{
    background-image: url(../../resources/images/backgroundRight800x1280.jpg) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background-size: 100%;
}

//more menu Styling
.moreMenu{
    margin-top: 0.7em;
    font-size: 0.7em;
    color: white;
    text-align: center;
}

.moreMenuItemFirst{
    background-color: #58595B;
    border: 1px solid silver;
    -moz-border-radius-topleft:12px;
    -moz-border-radius-topright:12px;
    -webkit-border-top-left-radius:12px;
    -webkit-border-top-right-radius:12px;
    border-top-left-radius:12px;
    border-top-right-radius:12px;
    margin: 0px 0.5em;
    padding: 0.5em;
}

.moreMenuItem{
    background-color: #58595B;
    border-width: 0 1px 1px 1px;
    border-color: silver;
    border-style: solid;
    margin: 0px 0.5em;
    padding: 0.5em;
}

.moreMenuItemLast{
    background-color: #58595B;
    border-width: 0 1px 1px 1px;
    border-color: silver;
    border-style: solid;
    -moz-border-radius-bottomleft:12px;
    -moz-border-radius-bottomright:12px;
    -webkit-border-bottom-left-radius:12px;
    -webkit-border-bottom-right-radius:12px;
    border-bottom-left-radius:12px;
    border-bottom-right-radius:12px;
    margin: 0px 0.5em;
    padding: 0.5em;
}

//eResource Styling
#eRList{
    background-color: #343433;
}

.wrapper{
    height: 100%;
    padding: 0.4em 0.3em;
}

.imageWrapper{
    display: inline-block;
    width: 20%;
    max-width: 20%;
    text-align: center;
    padding: 0.3em;
    margin-right:0.5em;
    vertical-align: top;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}


.contentWrapper{
    display: inline-block;
    padding: 0.3em 0.3em 0.2em 0.3em;
    width: 75%;
    max-width: 75%;
    border-left: 0.6em solid #f0a03e;
}

.titleHeader{
    font-weight:bold;
    padding: 0em 0.2em 0.3em 0.2em;
    border-bottom: 1px dashed black;
}

.contentDescription{
    padding: 0.2em;
    text-justify:inter-word;
}

.urlWrapper{
    text-align: right;
    margin-top: 0.2em;
}

.urlContainer{
    display: inline-block;
    padding: 0.2em 0.2em 0em 0.2em;
    text-align: center;
}

#urlBtn{
    background: #f0a03e;
    padding: 0.5em 0.6em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    //color: white;
    font-size: 0.5em;
    text-decoration: none;
    vertical-align: middle;
    margin: 0.3em 0em 0.3em 0.3em;
}

.infoToolBar{
    font-size: .75em;
    //border-top: 3px solid orange;
}

//opening hours Styling
.ohMainPanel{
    padding: 0.3em;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.ohHeader{
    font-weight:bold;
    padding: 0em 0.3em 0.2em;
    border-bottom: 1px solid black;
}

#ohMainBody{
    padding: 0.35em;    
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.locationHeader{
    padding-left: 0.25em;
    padding-right: 0.25em;
    margin-top: 0.25em;
}

#termDate {
    color: #A9A9A9;
    border-bottom: 0.1em solid #f0a03e;
}

#openingHoursTable{
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.4em;
}

.alignRight{
    text-align: right;
}

.alignLeft{
    text-align: left;
}

#openingHoursTable th{
    padding: 0.20em;
}

#openingHoursTable tr{
    border-bottom: 0.1em dashed #f0a03e;
}

.ohContentWrapper{
    display: inline-block;
    padding: 0.3em 0.5em 0.25em 0.3em;
    width: 100%;
    max-width: 100%;
    border-left: 0.2em solid #f0a03e;
}

//Search Module Styling
#basicPanel{
    height: 100%;
    padding: 0.4em 0.4em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border:solid #404040 1px;
    border-radius: 13px;
    margin: 0px 0px 0px 0px;
    background: #FFFFFF;
}
.advaPanel{
    border:solid 1px white;	
    padding: 0.7em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 7px;
    background-color: #404040 ;
}
.basicTitle{
     font-size: 0.9em;
     font-weight:bold;
     color: black;
     border-bottom: 1px solid black;
}
.adsTitle{
     font-size: 0.9em;
     color: white;
     font-weight:bold;
     //border-bottom: 1px solid black;
     padding-left: 0.5em;
}
#basicselectField{
    font-size: 0.8em;
    color: black;
    border-width:0.2px;	
    border:solid #909090;
    border-radius: 15px;
    margin: 5px 0px 2px 3px;
}

#basicsearchField{
    font-size: 0.8em;
    background: #FFFFCC!important;
    color: black;
    border-width:0.2px;	
    border:solid #909090;
    border-radius: 15px;
    margin: 5px 0px 2px 3px;
}
#toggleFieldbasic{
    font-size: 0.9em;
    color: black;
    margin: 1px 0px 0px 3px;
    width: 100%;
}
#basicSearchBtn{
    background: #585858 ;
    padding: 0.1em 0.6em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: white;
    font-size: 0.8em;
    text-decoration: none;
    vertical-align: middle;
    margin: 5px 0px 2px 3px;
}
#advanceSearchBtn{
    padding: 0.5em 0.6em;
    color: Black;
    margin: 1px 0px 1px 0px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border:solid #404040 1px;
    border-radius: 13px;
}
.advanceh3{
    font-size: 0.9em;
    font-weight:bold;
    text-align: left;
    color: black;
    padding: 0.7em 0.2em 0.7em, 0.9em;
}
.advancesub{
    border-top: 1px solid black;
    font-size: 0.7em;
    text-align: right;
    color: black;
    font-style:italic;
    padding: 0.1em 0.1em 0.1em 0.1em;
}

.mainbtnClicked{
  //background-color: rgb(255,180,0);
    background-color: #A8A8A8;
}

.mainbtntext{
    font-size: 0.9em;
    font-weight:bold;
    text-align: left;
    color: black;
    padding: 0.7em 0.2em 0.7em, 0.9em;
}

#maineresourcesBtn{
    padding: 0.5em 0.6em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin: 10px 0px 0px 0px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border:solid #404040 1px;
}

#mainexampaperBtn{
    padding: 0.5em 0.6em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin: 0px 0px 0px 0px;
    border:solid #404040 1px;
    border-top: none;
    border-bottom: none;
}

#mainmyaccBtn{
    padding: 0.5em 0.6em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin: 0px 0px 0px 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border:solid #404040 1px;
}

#searchPanWrapper{
    display: inline-block;
    width: 67%;
    padding: 2px 2px 2px 2px;
    margin-right:0.3em;
    vertical-align: top;
}
#searchBtnWrapper{
    display: inline-block;
    width: 30%;
    padding-top: 2px;
    vertical-align: top;
}
#togglePanWrapper{
    display: inline-block;
    width: 98%;
    padding: 1px 2px 2px 2px;
    vertical-align: top;
}
//ResultList
.rsBtnClicked{
    opacity:0.4;
    filter:alpha(opacity=50);
}

.resultDspTitle{
    font-size: 0.6em;
    font-weight:bold;
    text-align: left;
    color: black;
    padding: 0.1em 0.1em 0.1em 0.1em;
    margin-left: 5px;
    margin-right: 5px;
}
.resultDsp{
    font-size: 0.7em;
    text-align: left;
    color: black;
    font-style:italic;
    padding: 0.1em 0.1em 0.1em 0.1em;
    margin-left: 5px;
}
#resultsummaryBtn{
    font-size: 0.6em;
    text-align: left;
    color: black;
    font-style:italic;
    background-color:transparent;
    padding: 0.1em 0.1em;
    border-bottom: 1px ridge #696969;	
    margin-left: 5px;
    margin-right: 5px;
}
#resultrangeBtn{
     //  background: #585858 ;
    background: #D8D8D8;
    font-size: 0.6em;
    text-align: center;
    color: black;
    padding: 0.5em 0.8em 0.5em 0.7em;
    border:solid #909090 1px;
    border-radius: 10px;
    //margin: 5px 5px 5px 5px;
    margin: 1px 10px 5px 5px;
}
#resultsorterField{
    font-size: 0.6em;
    color: black;
    border-width:0.2px;	
    border:solid #909090;
    border-radius: 15px;
    margin: 5px 5px 5px 5px;
}
#basicnumrecordsPan{
    background: #585858;
    border-width:0.2px;	
    border:solid #909090;
    border-radius: 10px;
    margin: 3px 5px 3px 0px;
    padding: 0.3em 0.2em 0.1em 0.2em;
}
.recordNumText{
    background: #585858 ;
    font-size: 0.6em;
    text-align: left;
    color: white;
    padding: 0.2em 0.2em 0.2em 0.2em;
    border-width:0.2px;	
    border:solid #909090;
    border-radius: 10px;
}
#resultNaviPan{
    background: #FFFFFF;
    width: 100%;
    background-color:transparent;
    margin: 5px 5px 5px 1px;
}
#resultSortWrapper{
    background: #FFFFFF;
    width: 100%;
    margin: 5px 5px 5px 1px;
    opacity:0.9;
    filter:alpha(opacity=90);
    padding-bottom: 6px;
}
#naviBtnPan{
    background: #FFFFFF;
    width: 100%;
    background-color:transparent;
    margin: 1px 5px 1px 1px;
}
#naviBtnLeftPan{
    width: 30%;
    background-color:transparent;
}

.naviBtnNPCus{
    font-size: 0.6em;
    width: 15%;
    background: #D8D8D8;
    color: black;
    margin: 1px 10px 5px 5px;
    padding: 0.5em 0.5em 0.5em 0.5em;
    border:solid #909090 1px;
    border-radius: 10px;
}

.filterWrapper{
    width: 100%;
    padding: 0.5em;
    vertical-align: top;
    border: 1px solid #000000;
    border-radius: 7px;
    //background-color: white;
    background-color: #D8D8D8;
}

#advsearchPan2Wrapper{
    background-color: #888888 ;
}

#advanceSearchSubmitLeft{
    display: inline-block;
    width: 55%;
    max-width: 55%;
    padding: 2px 2px 2px 5px;
    margin:0.1em 0.2em 0.1em 0.2em;
    vertical-align: top;
}
#advanceSearchSubmitRight{
    display: inline-block;
    width: 40%;
    max-width: 40%;
    padding: 2px 2px 2px 5px;
    margin:0.1em 0.2em 0.1em 0.2em;
    vertical-align: top;
}
#advanceSearchSubmit{
    background: #585858;
    padding: 0.5em 0em;
    color: white;
    font-size: 0.8em;
    vertical-align: middle;
}
//Advance Select Field
.advaSelectFieldSty{
    font-size: 0.8em;
    color: black;
    border:solid #909090 2px;
    border-radius: 10px;
    margin: 5px 3px 5px 3px;
}

//Advance Search Field
.advaSearchFieldSty{
    font-size: 0.8em;
    background: #FFFFCC!important;
    color: black;
    border:solid #909090 2px;
    border-radius: 10px;
    margin: 5px 3px 5px 3px;
}
//Advance Choice Field
.logicFilter{
    width: 100% !important;
    font-size: 0.75em !important;
    color: black !important;    
    border-top:solid orange 0.25em !important;
    border-bottom:solid orange 0.1em !important;
    background-color: white !important;
    text-align: center;
}

.logicWrapper{
    padding: 0.9em 0em;
}

//Advance Toggle Button
.aToggle1Text{
    font-size: 0.8em;
    font-weight:bold;
    text-align: left;
    color: black;
    padding: 0.1em 0.2em 0.1em 0.2em;
    margin: 5px 4px 5px 3px;
    border-radius: 8px;
}
#aToggle1{
    font-size: 0.9em;
    color: black;
    margin: 5px 5px 5px 5px;
}

#aToggle2{
    font-size: 0.9em;
    color: black;
    margin: 5px 5px 5px 5px;
    border:none;
    border-radius: 1px;
}
#aToggle3{
    font-size: 0.9em;
    color: black;
    margin: 5px 5px 5px 5px;
    border:none;
    border-radius: 1px;
}

#seaBtnDisplay{
    display: inline-block;
    width:98%;
    padding: 1px 2px 2px 2px;
    margin: 1px 1px 1px 3px;
    vertical-align: middle;
    text-align: center;
}

#colBtn{
    background: #D8D8D8;
    vertical-align: middle;
    text-align: center;
    border:solid #808080 1px;
    border-radius: 7px;
    padding: 0.1em 0.1em 0.1em 0.1em;
    font-size: 0.63em;
    margin: 1px 1px 1px 1px;
}


//bookmarked Styling
.addBookMarkedIcon{
    background-image: url(../../resources/images/addBM.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 25px;
    height: 35px;
    display: inline-block;
}

.removeBookMarkedIcon{
    background-image: url(../../resources/images/removeBM.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 25px;
    height: 35px;
    display: inline-block;
}

.locatorIcon{
    background-image: url(../../resources/images/bookshelfLocator.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 32px;
    display: inline-block;
}

.infoContent{
    padding: 0.5em;
}

.infoIcon{
    vertical-align: middle;
}

.pressed{
    color: orange;
}

.btnAddBookMarked{
    background-image: url(../../resources/images/addBM.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 25px !important;
    height: 35px !important;
    display: inline-block;
    margin: 5px 0.8em 5px 5px;
    float: right;
    border: 0;
}

.btnRemoveBookMarked{
    background-image: url(../../resources/images/removeBM.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 25px !important;
    height: 35px !important;
    display: inline-block;
    margin: 5px 0.8em 5px 5px;
    float: right;
    border: 0;
}

.btnLocator{
    background-image: url(../../resources/images/bookshelfLocator.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 20px !important;
    height: 32px !important;
    display: inline-block;
    margin: 5px 5px 5px 5px;
    float: right;
}

.btnLocatorDisable{
    background-image: url(../../resources/images/bookshelfLocatorbw.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 20px !important;
    height: 32px !important;
    display: inline-block;
    margin: 5px 5px 5px 5px;
    float: right;
}

.btnVisitLink{
    background-color:#FFFFFF !important;
    padding: 0.3em 0.6em;
    border: solid #808080 1px !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: black;
    font-size: 0.7em;
    margin-top: 7px;
 margin-bottom: 7px;
    //float: right;
  padding-left: 0.3em;
    padding-right: 0.3em;
    width: 160px !important;
    border: solid #808080 2px !important;
}

.resultDisclosure{
    display: inline-block;
    float: right;
    position: relative;
    bottom: -0.8em;
}

//resultlistitem Styling
.result-list-item{
    padding: 0.4em 0.4em 0em;
    border-bottom: 1px ridge #696969;
    box-shadow: 1px 1px 2px rgba(0,0,0,.5);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
    background-color: #F2F2F2;
}


.resultImage{
    width: 4.5em !important;
    height: 6em !important;
    display: inline-block;
    text-align: center;
    margin-right:0.5em;
}

.resultTitle{
    font-weight:bold;
    font-size: 0.7em;
    background-color:#F7B35B;
    padding-left: 0.3em;
    padding-right: 0.3em;
}

.resultAuthor{
    font-weight:bold;
    font-size: 0.7em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    background-color:white;
}

.resultLineBreak{
    border-bottom: 1px dashed black;
    margin-bottom: 0.5em;
}

.resultBkFormat{
    font-size: 0.6em;
    font-weight:bold;
    padding-left: 0.3em;
}

.resultCallNumber{
    font-size: 0.6em;
    font-weight:bold;
    color: red;
    padding-left: 0.3em;
}

.resultYear{
    font-size: 0.6em;
    font-weight:bold;
    color: grey;
    float: left;
    padding-left: 0.3em;
}


//LibraryUpdates Styling
.productBox{
    height: 100%;
    position: relative;
    background-color:black;
    border: 1px solid #949494;
    border-radius:0.7em;
    //border-width:0.9em;
    margin: 1em 1em 1em 1em;
}

.productBody{
    font-size:0.8em;
    background-color:white;
    border-radius: 0.7em;
    padding:0.5em 1em 0.5em 1em;
    overflow: hidden;
}

.productDateText{
    font-size: 0.4em;
    font-weight:bold;
    text-align: center;
    color: black;
    font-style:italic;
    padding: 0.5em 0em 0em 0em;
}

.productDate{
    width:3.2em;
    height:1.4em;
    border-radius: 0.3em;
    background-color:orange;
    box-shadow: 0.07em 0.07em 0.4em 0.04em #b0b0b0;
    position:absolute;
    top:-0.75em;
    left:-0.75em;
    z-index:100;
}

.disclosureIcon{
    text-align: right;
    //background-image: url(../../sdk/resources/themes/images/default/pictos/code3.png);
    //background-position: center;
    //background-repeat: no-repeat;
    //display: inline-block;
    width: 100%;
    height: 100%;
    display: inline-block;
}

img#disclosureIcon{
    width: 25px;
    height: 25px;
    display: inline-block;
}

//ContactUs Styling
#topPanel{
    background-color:white;
    border-radius: 0.7em;	
    border: 1px solid #949494;
    padding:0.5em 0.5em 0.5em 0.5em;
}

#vboxContainer1{
    border-right: 1px solid #dbd7db;
    padding:0.5em 1.5em 0.5em 0.5em;
}

#vboxContainer2{
    padding:0.5em 0.5em 0.5em 1em;
}

.contactUsTitle{
     font-size: 0.9em;
     font-weight:bold;
     border-bottom: 1px solid #dbd7db;
}

.libHotlineText{
     font-size: 0.7em;
     font-weight:bold;
     font-style:italic;
     color:#949494;
}

#libHotlineButton{
    background-color: white ;
    //color: white;
    border-radius: 0.5em;
    font-size: 1em;
}

.libEmailText{
     font-size: 0.7em;
     font-weight:bold;
     font-style:italic;
     color:#949494;
}

#libEmailButton{
    background-color: white ;
    //color: white;
    border-radius: 0.5em;
    font-size: 1em;
}

#libFacebookButton{
    height: 45px;
    width: 45px;
    border-radius: 0.5em;
    background-color: white ;
    //color: white;
}

#libBlogButton{
    height: 45px;
    width: 45px;
    border-radius: 0.5em;
    background-color: white ;
    //color: white;
}

.contactUsHeartIcon{
    background-image: url(../../resources/images/contactUsHeart.png);
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 10px;
    height: 10px;
    padding: 0em 0.7em 0em 0.7em;
}

//RecommendTitle Styling
.recommendStarIcon{
    background-image: url(../../resources/images/recommendStar.png);
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    width: 10px;
    height: 10px;
    padding: 0em 0.7em 0em 0.7em;
}

#recommendTitleTopPanel{
    background: white !important;
}

#recommendTitleButton{
    background-color:white;
    border: 1px solid #949494;
    border-radius: 0.7em;
}

.recommendTitleButton1{
    padding: 0.5em 0em 0.5em 0em;
    font-size: 0.9em;
    font-weight:bold;
    text-align: left;
    color: black;
}

.recommendTitleh1{
    font-size: 0.7em;
    font-weight:bold;
    font-style:italic;
    padding: 0.5em 0em 0em 0em;
}

.recommendTitleh2 {
    font-size: 0.7em;
    font-weight:bold;
    font-style:italic;
    text-align: right;
    //vertical-align: middle;
    height:25px;
    line-height:25px;
    margin: 0em 0.5em 0em 0em;
}

#name{
   //background-color:#faf0bb;
    font-size: 0.8em;
    color: black;
    border: 2px solid #949494;
    border-radius: 0.7em;
    margin: 0em 0em 0.8em 0em;
}

#email{
    //background-color:#faf0bb;
    font-size: 0.8em;
    color: black;
    border: 2px solid #949494;
    border-radius: 0.7em;
    margin: 0em 0em 0.8em 0em;
}

#departmentOrSchool{
    //background-color:#faf0bb;
    font-size: 0.8em;
    color: black;
    border: 2px solid #949494;
    border-radius: 0.7em;
    margin: 0em 0em 0.8em 0em;
}

#dottedBorderPanel{
    border-top: 2px dotted black;
    padding: 0em 0em 0.5em 0em;
}

#recommendedTitle{
    //background-color:#faf0bb;
    height: 10px;
    font-size: 0.8em;
    color: black;
    border: 2px solid #949494;
    border-radius: 0.7em;
    //margin: 0em 0em 0.5em 0em;
}

#otherInfoOnTitle{
    //background-color:#eeebfa;
    font-size: 0.8em;
    color: black;
    border: 2px solid #949494;
    border-radius: 0.7em;
    margin: 0em 0.7em 0.5em 0em;
}

#titleType{
    //background-color:#eeebfa;
    font-size: 0.8em;
    color: black;
    border: 2px solid #949494;
    border-radius: 0.7em;
    margin: 0em 0em 0.5em 0em;
}

#submitButton{
    background: #585858 ;
    border-radius: 0.7em;
    color: white;
    font-size: 0.7em;
    text-align: center;
}

//Details View Main & AvailTab Styling
img#mtImg{
	
	padding-top: 5%;
	padding-bottom: 5%;
	vertical-align: top;
}
section.mtTitle{
	padding-top: 5%;
}

.vtop{
	vertical-align: top;
	height: 100%
}

div.topWrapper{
        //Yi Le added in a width: 100%
	width: 100%;
	//border-top: 1px solid #949494;
	border-bottom: 1px solid #949494;
        //Yi Le added in a display: inline-block
        display: inline-block;
}
div.topWrapper#first{
	
	border-top: 1px solid #949494;
}

div#htmlpad{
	padding-top: 0.5em;
}

div.topWrapper div.wrapped{
	display: inline-block;
	width: 63%;
}

div.miniWrap{
	display: inline-block;
}

div#bmBtn{
	display: inline-block;
	float: right;
	padding-right: 3%;
}



div#w1{
	width: 35%;
	text-align: center;
	margin-left: auto% ;
	margin-top: auto%;
	margin-bottom: auto%;
	padding-right: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 2%;
	padding-top: 3%;
}
div#w2{
	width: 63%;
}

div#overBlock{
	margin: 1%;
	padding-bottom: 3%;
	border-style:solid;
    border-width:0.2em;
	border-radius: 5px;
	border-color: #C0C0C0;
	background-color: #FFFFFF;
	
}

div#overBlockTop{
	margin: 1%;
	padding-bottom: 3%;
	border-style:solid;
    border-width:0.2em;
	border-radius: 5px;
	border-color: #C0C0C0;
	background-color: #FFFFFF;
	
}
div#overBlockBtm{
	margin: 1%;
	padding-bottom: 3%;
	border-style:solid;
    border-width:0.2em;
	border-radius: 5px;
	border-color: #C0C0C0;
	background-color: #FFFFFF;
	
}

div#titleBlock{
	border-bottom: 0.1em solid #C0C0C0;
	padding-top: 5%;
	padding-bottom: 3%;
}

div#pubBlock{
	padding-top: 3%;
	padding-bottom: 2%
}

div#btmBlock{
	margin-left: 3%;
	margin-top: 2%;
	padding-right: 2%;
}

div#topBlock{
	width: 99%;
	border-bottom: 0.1em solid #C0C0C0;
}

div#avaTopBlock{
	padding-bottom: 2%;
	margin-top: 2%;
	padding-left: 3%;
	margin-bottom: 2%;
	border-bottom: 0.1em solid #C0C0C0;
}

div#avaMidBlock{
	padding-top: 3%;
	padding-bottom: 3%;
	margin-bottom: 3%;
	//border-bottom: 0.1em solid #C0C0C0;
}

div#avaMidBlock div.mb{
	text-align: center;
	margin-left: auto%;
	margin-right: auto%;
	
	
	
}



h4.b{
	font-weight:bold;
}

div#mtTitle{
	color: #808080;
}

div#aBtm{
	margin-left: 3%;
}
div#aBtmB{
	margin-left: 2%;
	margin-right: 2%;
        //Yi Le added a float: right
        float: right;
}

div.mtAuth{
	font-size: 0.8em;
}

div.mtCall{
		color: red;
}

div.b{
	font-weight: bold;
	overflow: hidden;
}

div.centered{
	text-align: center;
}

div.mtBottom{
	font-weight: bold;
	overflow: hidden;
	white-space: no wrap;
}

div.mtBottomIn{
	font-weight: bold;
	overflow: hidden;
	white-space: no wrap;
	display: inline-block;
}


div#availEnd{
	font-weight: bold;
	color: red;
	padding-top: 0.3em;
	padding-left: 0.3em;
}

button.libcatBtn{
	background: #585858 ;
    padding: 0.1em 0.6em;
	//padding-left: 0.3em;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color: white;
    font-size: 0.7em;
	
}

button.ebkBtn{
	background: #FFFFFF ;
    padding: 0.1em 0.6em;
	padding-left: 2%;
	padding-bottom: 2%;
	//margin-left: 2%;
    -webkit-border-radius: 8px!important;
    -moz-border-radius: 8px!important;
    border-radius: 8px!important;
    color: #585858;
    font-size: 0.8em!important;
	width: 100%!important;
	
	
}

button.libcatBtn#avail{

	height: 5em;
	width: 88%;
}

.reserveBtn{
	background: #585858 ;
    padding: 0.1em 0.6em!important;
    -webkit-border-radius: 8px !important;
    -moz-border-radius: 8px !important;
    border-radius: 8px !important;
    color: white;
    font-size: 1.0em!important;
	margin-top: 1.5%;
	margin-bottom: 5%;
	margin-right: 3%;
	height: 2.5em;
	width: 100%;
    
}

button#availFloorPlanButton{
	background: #FFFFFF ;
    padding: 0.1em 0.6em!important;
    -webkit-border-radius: 8px!important;
    -moz-border-radius: 8px!important;
    border-radius: 8px!important;
    color: #585858;
    font-size: 0.7em!important;
	margin-top: 5%;
	margin-bottom: 1.5%;
	//height: 100%;
	height: 5em;
	width: 88%;
}

div#buttons{
	width: 98%;
	height: 40%;
}

div#b1{
	width: 99%;
	text-align: center;
}

div#b2{
	width: 99%;
	text-align: center;
}

//ShelfLocator Styling
#shelfImageContainer{
    width: 90%;;
    height: 90%;
    margin: 3em 1em 3em 1em;
}

#shelfImage{
    width: 90%;;
    height: 90%;
}

.shelfTitleWrapper{
    padding: 0.5em 0.5em 0.5em 0.5em;
}

.shelfnumber{
    color: red;
}

.shelfBtnLocator{
    background-image: url(../../resources/images/bookshelfLocator.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 20px !important;
    height: 32px !important;
    display: inline-block;
    margin: 5px 5px 5px 5px;
    float: left;
}

.eachBtnLocator{
    background-image: url(../../resources/images/bookshelfLocator.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 20px !important;
    height: 32px !important;
    display: inline-block;
    margin: 5px 5px 5px 5px;
    float: right;
}

.eachDisableBtnLocator{
    background-image: url(../../resources/images/bookshelfLocatorbw.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 20px !important;
    height: 32px !important;
    display: inline-block;
    margin: 5px 5px 5px 5px;
    float: right;
}

.availButtons{
    width: 100%;
    display: inline-block;
}